﻿@model iemtm.WeChat.Core.Model.CollectorRepairDetailedModel
@{
    ViewBag.Title = "采集器维修详情";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国铁塔油机管理系统-@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/Content/css/frozenui.css">
    <link rel="stylesheet" href="~/Content/css/style.css">
    <link rel="stylesheet" href="~/Content/css/swiper.min.css">
    <link href="~/Content/css/aui.css" rel="stylesheet" />
    <script src="~/Content/script/swiper.min.js"></script>
    <script src="~/Content/script/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="~/Content/css/weui.min.css">
    <link rel="stylesheet" href="~/Content/css/jquery-weui.min.css">
    <script src="~/Content/script/jquery-1.11.0.min.js"></script>
    <script src="~/Content/script/jquery-weui-1.2.1.min.js"></script>

    <script src="~/Content/script/swiper.js"></script>
    <script src="~/Content/script/Uitls.js"></script>


    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        .swiper-container {
            width: 100%;
        }

        #nav {
            background: #fff;
        }

            #nav .swiper-wrapper {
                box-sizing: border-box;
                margin: 0;
                line-height: 1.6rem;
            }

            #nav li {
                text-align: center;
                color: #424242;
                font-size: 0.63rem;
            }

                #nav li span {
                    color: #3597D9;
                }

            #nav .active-nav {
                color: #2ECA70;
                border-bottom: 2px solid #2ECA70;
            }

                #nav .active-nav span {
                    color: #2ECA70;
                }



        #page {
            position: absolute;
            top: 1.68rem;
            left: 0;
            right: 0;
            bottom: 1.6rem;
            overflow: hidden;
        }

            #page .swiper-slide {
                text-align: center;
                overflow-y: scroll;
                position: relative;
                padding-top: 5px;
                box-sizing: border-box;
            }

        #tableHeader {
            height: 1.6rem;
        }

            #tableHeader table {
                width: 100%;
                height: 1.6rem;
                color: #fff;
                font-size: 0.6rem;
            }

                #tableHeader table tr th {
                    text-align: center;
                }

                #tableHeader table th:nth-child(even) {
                    background: #4FC2A1;
                }

                #tableHeader table th:nth-child(odd) {
                    background: #334960;
                }

        #content {
            position: absolute;
            top: 2.1rem;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
        }

            #content table {
                /*background: #fff;*/
                width: 100%;
                border-bottom: 1px solid #ccc;
            }

                #content table td {
                    word-break: break-word;
                    text-align: center;
                    border-right: 1px solid #ccc;
                }

                #content table tr td:last-child {
                    border-right: none;
                }

        #page table tr:nth-child(even) {
            background: #F8F8F8;
        }

        #page tr td {
            font-size: 0.64rem;
            color: #000;
            padding: 10px 0;
            font-family: "微软雅黑";
        }

            #page tr td:nth-child(1) {
                width: 20%;
            }

            #page tr td:nth-child(2), #page tr td:nth-child(3) {
                width: 25%;
            }

            #page tr td:nth-child(4), #page tr td:nth-child(5) {
                width: 15%;
            }



        #footer {
            position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;
        }

            #footer .ui-btn-primary {
                height: 1.6rem;
                width: 100%;
                line-height: 1.6rem;
                font-size: 0.68rem;
            }

        .imgWh {
            width: 100%;
            height: 80px !important;
        }
    </style>
</head>
<body>


    <div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav" id="navli">维修详情</li>
            @*<li class="swiper-slide">发电记录</li>*@
        </ul>
    </div>

    <div class="swiper-container" id="page">
        <div class="swiper-wrapper">
            <div class="swiper-slide slidepage">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>维修采集器ID:</td>
                        <td>@Model.cr.DTUID</td>
                    </tr>
                    <tr>
                        <td>维修内容:</td>
                        <td>@Model.cr.RepairContent</td>
                    </tr>

                    <tr>
                        <td>维修时间:</td>
                        <td>@Model.cr.CreateTime</td>
                    </tr>
                    <tr>
                        <td>维修人:</td>
                        <td>@Model.cr.RepairerCode</td>
                    </tr>
                    <tr>
                        <td>维修人名字:</td>
                        <td>@Model.cr.RepairerName</td>
                    </tr>
                    <tr>
                        <td>维修人电话:</td>
                        <td>@Model.cr.RepairerPhone</td>
                    </tr>

                    <tr>
                        <td>状态:</td>
                        <td class="aui-text-info">
                            @Model.State

                        </td>
                    </tr>
                    @if (Model.cr.AuditState > 0)
                    {
                        <tr>
                            <td>审核人:</td>
                            <td>@Model.cr.AuditPersonName</td>
                        </tr>
                        <tr>
                            <td>审核备注:</td>
                            <td>@Model.cr.AuditRemarks</td>
                        </tr>
                    }
                    <tr>
                        <td>维修图片:</td>
                        <td></td>
                    </tr>
                </table>

                <div class="weui-cell">
                    <ul class="aui-list-view aui-grid-view " id="addImg">
                        @*<li id="addImg">

                            </li>*@
                        @if (Model.crp != null)
                        {
                            int IntTemp = 0;
                            foreach (var note in Model.crp)
                            {

                                <li class='aui-col-xs-3' onclick="OpenImg(@IntTemp)">
                                    <img src='@note.RepairPicture' class="imgWh">
                                </li>
                                IntTemp = IntTemp + 1;
                            }
                        }
                    </ul>
                </div>
                @*<a href="javascript:;" class="weui-btn weui-btn_primary" id="pb1">只有图片</a>*@
            </div>


        </div>


    </div>





    <section class="ui-container actionOne">
        <section id="actionsheet">
            <div class="demo-item">
                <div class="demo-block">
                    <div class="ui-actionsheet" id="actionsheet1">
                        <div class="ui-actionsheet-cnt am-actionsheet-down">
                            <h4>选择操作菜单</h4>
                            <button id="returnList">返回列表</button>
                            <div class="ui-actionsheet-split-line"></div>
                            <button id="cancel">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <div class="ui-btn-wrap" id="footer">
        <button class="ui-btn-primary">
            操作
        </button>
    </div>

    <script>
            (function (designWidth, maxWidth) {
                var html = document.getElementsByTagName("html")[0];
                var tid;
                function refreshRem() {
                    var width = html.getBoundingClientRect().width;
                    html.style.fontSize = width / 15 + "px"
                }
                window.addEventListener("resize", function () {
                    clearTimeout(tid); //防止执行两次
                    tid = setTimeout(refreshRem, 300);
                }, false);
                refreshRem();
            })();


            (function (doc, win) {

                var size = 10;
                var myNav = new Swiper('#nav', {
                    spaceBetween: 10,
                    slidesPerView: 1,
                    watchSlidesProgress: true,
                    watchSlidesVisibility: true,
                    on: {
                        tap: function () {
                            myPage.slideTo(myNav.clickedIndex)
                        }
                    }
                });

                var myPage = new Swiper('#page', {
                    on: {
                        slideChangeTransitionStart: function () {
                            updateNavPosition()
                        }
                    }
                });

                function updateNavPosition() {
                    $('#nav .active-nav').removeClass('active-nav');
                    var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
                    if (!activeNav.hasClass('swiper-slide-visible')) {

                        if (activeNav.index() >= myNav.activeIndex) {
                            var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                            myNav.slideTo(activeNav.index() - thumbsPerNav)
                        } else {
                            myNav.slideTo(activeNav.index())
                        }
                    }
                }

                $("#footer").click(function () {
                    $('.ui-actionsheet').addClass('show');

                });

                $("#cancel").click(function () {
                    $(".ui-actionsheet").removeClass("show");
                });

                $("#goBack").click(function () {

                    window.history.back()
                })

            })(document, window);




            //返回列表
            $("#returnList").click(function () {
                location.href = "/Maintain/Index";
            });

            //$("#addImg").click(function () {
            //    var imgArray = [];
            //    var imglist = $("#addImg img");
            //    for (var i = 0; i < imglist.length; i++) {
            //        var a = imglist[i].src;
            //        imgArray.push(a)
            //    }
            //    var pb1 = $.photoBrowser({
            //        items: imgArray,
            //        onSlideChange: function (index) {
            //            console.log(this, index);
            //        },

            //        onOpen: function () {
            //            $("#page").hide();
            //            console.log("onOpen", this);
            //        },
            //        onClose: function () {
            //            $("#page").show();
            //            $("#nav").show();
            //            console.log("onClose", this);
            //        }
            //    });
            //    $("#page").hide();
            //     $("#nav").hide();
            //    pb1.open();
            //})

            function OpenImg(Index)
            {
                var imgArray = [];
                var imglist = $("#addImg img");
                for (var i = 0; i < imglist.length; i++) {
                    var a = imglist[i].src;
                    imgArray.push(a)
                }
                var pb1 = $.photoBrowser({
                    items: imgArray,
                    onSlideChange: function (index) {
                        console.log(this, index);
                    },

                    onOpen: function () {
                        $("#page").hide();
                        console.log("onOpen", this);
                    },
                    onClose: function () {
                        $("#page").show();
                        $("#nav").show();
                        console.log("onClose", this);
                    }
                });
                $("#page").hide();
                $("#nav").hide();
                pb1.open(Index);

            }


    </script>
</body>
</html>
